<template>
  <div class="center_Wrap_top">
    <div class="center_title">
      <div class="recommend_list_left">
        <!-- <router-link
          to="/about"
          custom
          v-slot="{ href, route, navigate, isActive, isExactActive }"
        >
          <span :active="isActive" :href="href" @click="navigate">
            {{ route.fullPath }}
          </span>
        </router-link> -->
        <span class="channel_item active">会员专区</span>
        <router-link
          class="channel_item"
          active-class="active"
          to="/discovery/video"
          >视频课</router-link
        >
        <router-link
          class="channel_item"
          active-class="active"
          to="/discovery/zhibo"
          >直播课</router-link>
        <router-link
          class="channel_item"
          active-class="active"
          to="/discovery/xianxiake"
          >线下课</router-link>
        <router-link
          class="channel_item"
          active-class="active"
          to="/discovery/zhuti"
          >主题</router-link
        >
        <!-- <router-link
          active-class="router-link-active"
          to="/discovery/zhuti"
          custom
          v-slot="{ href, route, navigate, isActive, isExactActive }"
        >
          <span :active="isActive"  @click="navigate"> 主题 </span>
        </router-link> -->
        <!-- <span class="channel_item">主题</span> -->
      </div>
    </div>
  </div>
  <div class="panel-body">
    <!-- 指定组件的呈现位置 -->
    <router-view></router-view>
  </div>
  <div class="center_Wrap_bottom" style="margin-top: 20px">
    <div class="center">

      <!-- vip展示区 -->
      <el-card shadow="always" class="vipContainer">
        <p class="vipName">会员专区</p>
        <el-row>
          <!-- 用户头像 -->
          <el-col :span="2" :offset="0">
            <div>
              <img class="userAva" src="./images/1.jpg" alt="" />
            </div>
          </el-col>
          <!-- 用户信息 -->
          <div class="userInfo">
            <div>
              <span class="userName">用户的名字</span>
              <el-button class="userVipButton">Lv</el-button>
              <!-- <button class="userVipButton">Lv.1</button> -->
            </div>
            <div class="vipPrivilege">开通会员尊享10大特权</div>
          </div>
          <!-- vip中心 -->
          <el-row class="vipCenter">
            <div :span="6" :offset="0">
              <img
                class="vipCenterImg"
                src="https://rs.dance365.com/teach_video_free.png"
                alt=""
              />
            </div>
            <div class="centerInfo" :span="6" :offset="0">
              <p>以下<span>207</span>个会员专区课程全部免费学习</p>
            </div>
          </el-row>
          <el-row class="vipCenter">
            <div :span="6" :offset="0">
              <img
                class="vipCenterImage"
                src="https://rs.dance365.com/teach_video_free.png"
                alt=""
              />
            </div>
            <div class="centerInfo" :span="6" :offset="0">
              <p>以下<span>207</span>个会员专区课程全部免费学习</p>
            </div>
          </el-row>
          <!-- 立即开通 -->
          <div class="vipRight">
            <button class="vipRightBtn">立即开通</button>
            <p class="rightText">查看/开通></p>
          </div>
        </el-row>
      </el-card>


      <!-- 过滤技能 兴趣技能   价格区间 -->

      <el-card shadow="never" class="filterContainer" style="margin-top: 20px">
        <!-- 一个技能 -->
        <el-row :gutter="20" v-for="(val, index) in categoryData" :key="index">
          <el-col :span="3" :offset="0" class="title">{{ val.label }}:</el-col>
          <el-col :span="21" :offset="0">
            <el-row>
              <el-col
                class="titleItem"
                :span="2.5"
                v-for="(item, index) in val.choises"
                :key="item.id"
                :offset="0"
              >
                {{ item.name }}</el-col
              >
              <!-- <el-col class="titleItem" :span="2.5" :offset="0">中国舞</el-col>
              <el-col class="titleItem" :span="2.5" :offset="0">民族民间舞</el-col>
              <el-col class="titleItem" :span="2.5" :offset="0">民族舞</el-col>
              <el-col class="titleItem" :span="2.5" :offset="0">中国舞</el-col>
              <el-col class="titleItem" :span="2.5" :offset="0">民族民间舞</el-col>
              <el-col class="titleItem" :span="2.5" :offset="0">民族舞</el-col>
              <el-col class="titleItem" :span="2.5" :offset="0">中国舞</el-col>
              <el-col class="titleItem" :span="2.5" :offset="0">民族民间舞</el-col>
              <el-col class="titleItem" :span="2.5" :offset="0">民族舞</el-col>
              <el-col class="titleItem" :span="2.5" :offset="0">中国舞</el-col>
              <el-col class="titleItem" :span="2.5" :offset="0">民族民间舞</el-col> -->
            </el-row>
          </el-col>
        </el-row>
        <!-- 价格区间 -->
        <!-- <el-row :gutter="20">
          <el-col :span="3" :offset="0" class="title">价格区间:</el-col>
          <el-col :span="21" :offset="0">
            <el-row>
              <el-col class="titleItem active" :span="2.5" :offset="0">2元以下</el-col>
              <el-col class="titleItem" :span="2.5" :offset="0">100元以上</el-col>
              <el-col class="titleItem" :span="2.5" :offset="0">1000以上</el-col>
              <el-col class="titleItem" :span="2.5" :offset="0">500以下</el-col>
            </el-row>
          </el-col>
        </el-row> -->
        <div class="reset">重置</div>
        <div class="foldContainer">
          <span>展开全部</span>
          <!-- <span>收起</span> -->

        </div>
        <div class="foldContainer" >
          <span @click="handlerFold" v-if="flag">展开全部</span>
          <span @click="handlerFold" v-else>收起</span>
        </div>
      </el-card> -->


      <el-card class="w" shadow="never" style="border-radius: 0px; box-sizing: border-box; margin: 20px 0">
        <div class="top" :class="{ isHidden: isFold }">
          <el-row :gutter="20" class="filter" v-for="(title, index) in courseStore.categoryData" :key="index">
            <el-col :span="2">
              <div class="filter_title">{{ title.label }}：</div>
            </el-col>
            <el-col :span="22">
              <!-- 筛选的文本 -->
              <span class="filter_content" :class="{ filter_content_active: selectId.includes(item.id) }"
                v-for="(item, index) in title.choises" :key="item.id" @click="isSelected(item.id,title.label)">{{
                item.name
                }}</span>
            </el-col>
          </el-row>
        </div>
        <div class="fold_toggle_container w" @click="changeHeight">展开全部</div>
      </el-card>


          <el-col class="orderItem " @click="zongHandler" :span="3" :offset="0" :class="naVideo==1?'light':''" index="1"
            v-if="naVideo==1">综合排序</el-col>
          <el-col index="1" class="orderItem " v-else :span="3" :offset="0">综合</el-col>
          <el-col index="2" :class="naVideo==2?'light':''" v-if="naVideo==2" :span="3" :offset="0">销量从高到低</el-col>
          <el-col index="2" v-else @click="Sale" :span="3" :offset="0">销量</el-col>

          <el-col index="3" :class="naVideo==3?'light':''" v-if="naVideo==3" :span="3" :offset="0">浏览量由高到低</el-col>
          <el-col index="3" v-else @click="glanceHand" :span="3" :offset="0">浏览量</el-col>
          <el-col :span="3" :offset="0">
            <span v-popover="popoverRef">价格</span>
            <el-popover index="4" ref="popoverRef" trigger="hover" virtual-triggering persistent>
              <p class="price" index="2-1" :class="naVideo==2-1?'light':''" @click="priceTop_lod()">价格由高到低 </p>
              <p class="price" index="2-2" :class="naVideo==2-2?'light':''" @click="priceLod_top()">价格由低到高 </p>

            </el-popover>
            <el-icon :size="20">
              <ArrowDown />
            </el-icon>
          </el-col>
          <el-col index="5" :class="naVideo==5?'light':''" v-if="naVideo==5" :span="3" :offset="0">发布时间由远及近</el-col>
          <el-col index="5" v-else @click="createTime" :span="3" :offset="0">发布时间</el-col>
        </el-row>
      </el-card>
      <!-- 小视频 -->
      <!-- <smallvideo></smallvideo> -->
      <videoItem v-for="item in isSs"></videoItem>
    </div>

    <!-- 加载更多-->
    <div class="load_more_btn_wrapper" style="">
      <span @click="load" v-if="courseStore.videoLength!=courseStore.totalVideoLe" class="load_more_btn"
        style="">加载更多</span>
      <div style="color: rgb(204, 204, 204); text-align: center; padding-top: 20px; display: none;">—
        没有更多内容啦 —
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import { onMounted, ref, nextTick } from "vue";
import smallvideo from '../../layout/videos/index.vue'
import videoItem from './videoItem/index.vue'
import { ElLoading } from 'element-plus'
// 引入分类的请求


import { reqCategory } from '../../api/course/index'

// 引入仓库的数据
import { useCourseStore } from '../../stores/course'
// 引入弹框
import { ElMessage } from 'element-plus'

// 存储分类请求参数
let filterInfo = ref([])
// 定义分类请求的参数
let filter = ref({
  //分类的名字
  filterCode: '',
  // 分类对应的id
  filterValue: []
})

// 当前小仓库的数据
const courseStore = useCourseStore()
// console.log(courseStore)

// 定义标题的选中样式
let activeCount = ref(0)
let flag = ref(true);
// 价格
const popoverRef = ref();
// 存储会员专区分类的数据
let categoryData = ref([]);

// 控制展开收缩
let isFold = ref(true)

// 选择时的id
let selectId = ref([])
// 存储综合排序的数据
let pageSize = ref<number>(20)
let pageNum = ref<number>(0)


// 综合排序是否高亮的问题
// 控制视频高亮标识
let naVideo = ref<number>(1)

// 
const isSs = ref('1')
// 定义筛选是否重复的问题
const repeat = () => {

}

// 筛选的回调 点击小分来再次发送请求
// id 是每个大分类里小选项的数据 name,filterCode是大分类的名
const isSelected = (id, name) => {

  // 先判断大数中组有没有这个大类的名字
  const filterItem = filterInfo.value.find(item => item.filterCode == name)
  // console.log(filterItem)
  if (!filterItem) {
    selectId.value.push(id)
    // 进入该判断证明没有这个大类的名字
    let val = []
    val.push(id)
    filterInfo.value.push({ filterCode: name, filterValue: val })
    // 发请求
    courseStore.getVideoList(pageSize.value, pageNum.value, { filterInfo: filterInfo.value })
    // console.log(filterInfo.value)
    return
  }

  // 判断里面点击同类的数组长度是否大于3
  if (filterItem.filterValue?.length >= 3) {
    let repeat = filterItem.filterValue?.find(item => item === id)
    if (repeat) {
      // 看是否有重复分类别  indexOf返回的是索引
      let index = filterItem.filterValue.indexOf(repeat)
      // 取消高亮
      // 取消高亮
      selectId.value.splice(index, 1)
      filterItem.filterValue.splice(index, 1)
      courseStore.getVideoList(pageSize.value, pageNum.value, { filterInfo: filterInfo.value })
      return
    }
    ElMessage.warning('同种类别只能选择三个选项')
    return
  }

  // 如果小于三个,判断已经有的是否重复
  let repeat = filterItem.filterValue?.find(item => item === id)
  if (repeat) {
    // 看是否有重复分类别  indexOf返回的是索引
    let index = filterItem.filterValue.indexOf(repeat)
    filterItem.filterValue.splice(index, 1)
    selectId.value.splice(index, 1)
    courseStore.getVideoList(pageSize.value, pageNum.value, { filterInfo: filterInfo.value })
    return
  }

  // 如果不重复就继续加进去-所点击的
  filterItem.filterValue.push(id)
  // console.log(filterInfo.value)
  // 高亮
  selectId.value.push(id)
  courseStore.getVideoList(pageSize.value, pageNum.value, { filterInfo: filterInfo.value })




}

// 收缩或展开的回调
const changeHeight = () => {
  isFold.value = !isFold.value
}

// 在挂载的时候获取请求
onMounted(() => {
  // 会员专区 获取分类请求的数据
  getCategory()


  courseStore.getVideoList(pageSize.value, pageNum.value, filter.value)
})


// 会员专区 获取分类请求的数据
const getCategory = async () => {
  try {
    let result = await reqCategory();
    // console.log(result)
    categoryData.value = result.data;
    // console.log(categoryData.value)
  } catch (error) {}
};




  courseStore.getCategory()
  courseStore.getVideoList(pageSize.value, pageNum.value, {})

// 加载更多
const load = () => {
  isSs.value += 1
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(255, 255, 255, 0.8)',

  })


  courseStore.getVideoList(pageSize.value, pageNum.value + 1, { filterInfo: filterInfo.value })
  nextTick(() => {

    setTimeout(() => {
      loading.close()
      //将第一页数据合并和剩下页数据合并
      courseStore.videoList.push.apply(courseStore.videoList, courseStore.ContenF)
    }, 1000)
  })


}
// 会员专区 获取分类请求的数据
// const getCategory = async () => {
//   try {
//     let result = await reqCategory()
//     // console.log(result)
//     categoryData.value = result.data
//     // console.log(categoryData.value)
//   } catch (error) {

//   }
// }
// 点击综合
const zongHandler = () => {
  // 0是综合高亮
  naVideo.value = 0
  // 发送请求
  courseStore.getVideoList(pageSize.value, pageNum.value, {})
}
// 点击销量
const Sale = () => {
  naVideo.value = 2
  // 发送销量请求
  courseStore.getSale(pageSize.value, pageNum.value)
}
// 点击浏览量
const glanceHand = () => {
  naVideo.value = 3
  courseStore.getGlance(pageSize.value, pageNum.value)
}
// 点击高到低价格
const priceTop_lod = () => {
  naVideo.value = 2 - 1
  courseStore.getLod_top(pageSize.value, pageNum.value)
}
// 点击价格低到高
const priceLod_top = () => {
  naVideo.value = 2 - 2
  courseStore.getLod_top(pageSize.value, pageNum.value)
}
// 点击发布时间
const createTime = () => {
  naVideo.value = 5
  courseStore.getTime(pageSize.value, pageNum.value)
}




</script>

<style scoped>
/* 外围样式 */
.center_Wrap_bottom {
  background-color: #f5f7f9;
}

/* 中间部分整体样式 */
.center {
  width: 1200px;
  margin: 0 auto;

  /* border: 1px solid red; */
}

/* 课程标题 */
.courseTitle {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0 auto;
  box-sizing: content-box;
}

.center_title {
  width: 1000px;
  margin: 0 auto;
  margin-top: 20px;
  height: 70px;
  /* border: 1px solid red; */
}

.recommend_list_left {
  width: 1000px;
  height: 80px;
  /* border: 1px solid red; */
  position: absolute;
  display: inline-block;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
  line-height: 80px;
  color: black;
  font-size: 16px;
}

.recommend_list_left .channel_item {
  padding: 20px 4px;
  margin: 0 20px;
  text-align: center;
  color: black;
}

.recommend_list_left .channel_item.active {
  color: black;
  border-bottom: 3px solid black;
}

.recommend_list_left span:hover {
  color: black;
}

.courseTitle .courseItm {
  margin: 0 32px;
  padding-bottom: 10px;
}

.courseItm.active {
  border-bottom: 3px solid #000;
  padding-bottom: 10px;
}

/* vip专区 */
.vipContainer {
  padding: 0 20px;
  margin-top: 20px;
}

.vipName {
  font-size: 16px;
  margin: 0 0 16px;
  font-weight: 400;
}

.userAva {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  margin-top: 10px;
  border-radius: 50%;
}

.userInfo {
  position: relative;
  min-width: 220px;
  margin-left: 10px;
  margin-top: 10px;
}

.userName {
  padding-top: 4px;
  font-size: 16px;
}

.userVipButton {
  margin-left: 8px;
  width: 15px;
  height: 10px;
  background: #ff3dc5;
}

.vipPrivilege {
  margin-top: 8px;
  font-size: 12px;
  color: #f93684;
}

.vipCenter {
  text-align: center;
  margin-left: 0px;
  /* padding:0 20px; */
  /* border-left: 2px solid #ccc; */
}

.vipCenterImg {
  width: 58px;
  height: 58px;
  margin: 0 10px;
  vertical-align: middle;
  /* text-align: center; */
  padding-left: 50px;
  border-left: 1px solid #eee;
}

.vipCenterImage {
  width: 58px;
  height: 58px;
  margin: 0 10px;
  vertical-align: middle;
  /* text-align: center; */
  padding-left: 50px;
}

.centerInfo {
  vertical-align: middle;
  width: 170px;
  margin-left: 10px;
}

.vipRight {
  margin-left: 80px;
  margin-top: 10px;
}

.vipRightBtn {
  border-radius: 20px;
  margin-bottom: 0px;
  padding: 9px 15px;
  font-size: 12px;
  background: #f93684;
  border: #f93684;
  color: #fff;
}

.rightText {
  color: #7d8090;
  font-size: 12px;
  margin-left: 10px;
}

/* 技能,价格,课程类型 */

/* 版心区 */
.w {
  width: 1200px;
  margin: 0 auto;
}

/* 筛选区域 */
.top {
  padding: 20px 30px 0;
}

.filter {
  position: relative;
}

/* 点击收起时 */
.isHidden {
  height: 130px;
  overflow: hidden;
}

.filter_title {
  color: #b1b5c1;
  padding: 7px 0;
  box-sizing: border-box;
  font-size: 14px;
}

.filter_content {
  display: inline-block;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  color: #7d8090;
  padding: 7px 13px;
  user-select: none;
  margin-right: 24px;
  margin-bottom: 10px;
}

/* 筛选文字的选中状态 */
.filter_content_active {
  background-color: #f93684;
  color: #fff;
}

/* 点击展开 */
.fold_toggle_container {
  height: 30px;
  text-align: center;
  color: #f93684;
  font-size: 14px;
  margin: 10px auto 0;
  background-color: #fff;
  cursor: pointer;
}






/* 排序 综合排序,销量,浏览量,价格,发布时间  */
.orderContainer {
  padding: 2px 10px;
  margin: 10px 0;
  font-size: 14px;
  cursor: pointer;
}

.orderItem.active {
  color: #f93684;
}

.price {
  text-align: center;
  vertical-align: center;
  font-size: 16px;
}

.light {
  color: #f93684;
}

/* 加载更多 */
.load_more_btn {
  display: block;
  width: 140px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #82858e;
  border: 1px solid #eaecf0;
  border-radius: 4px;
  background: #fff;
  text-align: center;
  margin: 20px auto 0;
  cursor: pointer;
}
</style>
